<template>
  <div class="page">
    <DatePicker
      v-model="cTime"
      :timevalue1="cTime"
      class="position-btn"
      @handleBlur="handBlur"
    ></DatePicker>
    <div class="value">
      平台下单:
      <span>{{ money }}</span>
    </div>
    <div id="map"></div>
  </div>
</template>
<script>
import { Scene, Mapbox } from "@antv/l7";
import { Choropleth } from "@antv/l7plot";
import { userMoneyDataQuery } from "@/api/ds/userMoney";
import DatePicker from "@/components/DatePicker/index.vue";
import dayjs from "dayjs";

const mapJson = `https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.1/administrative-data/area-list.json`;

export default {
  components: { DatePicker },
  props: {},
  data() {
    return {
      scene: null,
      list: [],
      cityList: [],
      districtList: [],

      provinceName: "",
      choropleth: null,
      cTime: [],
      // 省级数据
      provinceData: null,
      // 市级数据
      cityData: null,
      // 区级数据
      districtData: null,
      money: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  async mounted() {
    this.initCtime();
    await this.getData();
    this.initScene();
  },
  methods: {
    handBlur() {
      this.getData();
    },
    initCtime() {
      this.cTime = [
        dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"),
        dayjs().format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    async getData() {
      console.log(
        "%c [ this.cTime ]-57",
        "font-size:13px; background:#333333; color:#f3f3f3;",
        Array.isArray(this.cTime)
      );

      let query = { params: {} };
      query.params.begin = this.cTime[0];
      query.params.end = this.cTime[1];
      console.log(
        "%c [ query ]-59",
        "font-size:13px; background:#333333; color:#f3f3f3;",
        query
      );

      let res = await userMoneyDataQuery(query);
      if (res.code === 200) {
        this.list = res.data.userMoneyList;
        this.cityList = res.data.cityList;
        this.districtList = res.data.districtList;
        this.money = res.data.userMoney1.money;
      }
    },

    initScene() {
      this.scene = new Scene({
        id: "map",
        map: new Mapbox({
          style: "blank",
          center: [120.19382669582967, 30.258134],
          zoom: 3,
          pitch: 0,
        }),
      });

      fetch(mapJson)
        .then((response) => response.json())
        .then((list) => {
          // 给所有省份赋值
          const data = list.filter(({ level }) => level === "province");
          data.forEach((province) => {
            this.list.map((item) => {
              if (province.name === item.content) {
                province.value = item.money;
              }
            });
          });
          this.provinceData = data;
          // 给所有市区赋值0
          const cityData = list
            .filter(({ level }) => level === "city")
            .map((item) =>
              Object.assign({}, item, {
                value: 0,
              })
            );

          cityData.forEach((city) => {
            this.cityList.map((item) => {
              if (city.name === item.content) {
                city.value = item.money;
              }
            });
          });
          this.cityData = cityData;
          // 所有区赋值0
          const districtData = list
            .filter(({ level }) => level === "district")
            .map((item) =>
              Object.assign({}, item, {
                value: 0,
              })
            );
          districtData.forEach((district) => {
            this.districtList.map((item) => {
              if (district.name === item.content) {
                district.value = item.money;
              }
            });
          });
          this.districtData = districtData;

          const choropleth = new Choropleth({
            source: {
              data: data,
              joinBy: {
                sourceField: "adcode",
                geoField: "adcode",
              },
            },
            viewLevel: {
              level: "country",
              adcode: 100000,
            },
            autoFit: true,
            drill: {
              steps: [
                {
                  level: "province",
                  source: { data: cityData },
                },
                {
                  level: "city",
                  source: { data: districtData },
                },
                {
                  level: "district",
                  source: { data: districtData },
                },
              ],
              triggerUp: "unclick",
              triggerDown: "click",
              onDown: async (from, to, callback) => {
                callback();
              },
              onUp: (from, to, callback) => {
                callback();
              },
            },
            color: {
              field: "value",
              value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"],
              scale: { type: "quantize" },
            },
            style: {
              opacity: 1,
              stroke: "#ccc",
              lineWidth: 0.6,
              lineOpacity: 1,
            },
            label: {
              visible: true,
              field: "name",
              style: {
                fill: "#000",
                opacity: 0.8,
                fontSize: 10,
                stroke: "#fff",
                strokeWidth: 1.5,
                textAllowOverlap: false,
                padding: [5, 5],
              },
            },
            state: {
              active: { stroke: "black", lineWidth: 1 },
            },
            tooltip: {
              items: ["name", "value"],
            },
            zoom: {
              position: "bottomright",
            },
            legend: {
              position: "bottomleft",
            },
          });

          if (this.scene.loaded) {
            choropleth.addToScene(this.scene);
          } else {
            this.scene.on("loaded", () => {
              choropleth.addToScene(this.scene);
            });
          }
        });
    },
  },

  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 85vh;
  position: relative;
  .position-btn {
    z-index: 2147483647;
    position: absolute;
  }

  .value {
    position: absolute;
    top: 50px;
    left: 0;
    line-height: 1;
    font-weight: 500;
    font-size: 16px;
    span {
      font-weight: 600;
      font-size: 18px;
      line-height: 1.5;
    }
  }
}
</style>
